<template>
	<div class="classify-menu">
		<ul>
			<li
					:class="{active: active === 0}"
					@click="menuActive(0)"
			>
				<span>所有分类</span>
			</li>
			<li
					v-for="item in menuList"
					:key="item.id"
					:class="{active: active === item.id}"
					@click="menuActive(item.id)"
			>
				<span>{{item.name | formatMenu}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "Menu",
		props: {
			menuList: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				active: 0
			}
		},
		methods: {
			menuActive(id) {
				this.active = id;
				this.$emit('changeMenu', id);
			}
		}
	}
</script>
